<template>
  <div class="authority">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/interface' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <!-- <el-breadcrumb-item>商品列表</el-breadcrumb-item> -->
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-main>
      <section>
        <main>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <div>
                <el-alert
                  title="添加商品信息"
                  type="info"
                  :closable="false"
                  center
                  show-icon
                  class="hint"
                >
                </el-alert>
              </div>
              <div class="steps">
                <el-steps
                  :active="active - 0"
                  finish-status="success"
                  :align-center="true"
                >
                  <el-step title="基本信息"></el-step>
                  <el-step title="商品参数"></el-step>
                  <el-step title="商品属性"></el-step>
                  <el-step title="商品图片"></el-step>
                  <el-step title="商品内容"></el-step>
                  <el-step title="完成"></el-step>
                </el-steps>
              </div>
              <div class="tabs">
                <el-tabs
                  :tab-position="tabPosition"
                  @tab-click="tabsa"
                  type="index"
                  :before-leave="beforeLeave"
                  v-model="active"
                >
                  <!-- 基本信息 -->
                  <el-tab-pane name="0" label="基本信息">
                    <el-form
                      :model="ruleForm"
                      :rules="rules"
                      ref="ruleForm"
                      label-width="100px"
                      class="demo-ruleForm"
                      label-position="top"
                    >
                      <el-form-item label="商品名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                      <el-form-item label="商品价格" prop="price">
                        <el-input v-model.number="ruleForm.price"></el-input>
                      </el-form-item>
                      <el-form-item label="商品重量" prop="weight">
                        <el-input v-model.number="ruleForm.weight"></el-input>
                      </el-form-item>
                      <el-form-item label="商品数量" prop="amount">
                        <el-input v-model.number="ruleForm.amount"></el-input>
                      </el-form-item>
                      <el-form-item label="商品分类" prop="amount1">
                        <el-cascader
                          v-model="value"
                          :options="options"
                          :props="{
                            expandTrigger: 'hover',
                            label: 'cat_name',
                            value: 'cat_id',
                          }"
                          @change="handleChange"
                        ></el-cascader>
                      </el-form-item>
                    </el-form>
                  </el-tab-pane>
                  <!-- 商品参数 -->
                  <el-tab-pane name="1" label="商品参数">
                    <el-form>
                      <el-form-item
                        style="display: flex; flex-direction: column"
                        :label="item.attr_name"
                        v-for="item in setSoop"
                        :key="item.attr_id"
                      >
                        <div style="display: flex; flex-wrap: wrap">
                          <el-checkbox-group v-model="item.attr_vals">
                            <el-checkbox
                              style="margin: 5px 5px"
                              @change="check(index)"
                              v-for="(item1, index) in item.attr_vals"
                              :key="index"
                              :label="item1"
                              border
                              size="mini"
                            ></el-checkbox>
                          </el-checkbox-group>
                        </div>
                      </el-form-item>
                    </el-form>
                  </el-tab-pane>
                  <!-- 商品属性 -->
                  <el-tab-pane name="2" label="商品属性">
                    <el-form
                      ref="form"
                      :model="form"
                      label-width="80px"
                      label-position="top"
                    >
                      <el-form-item
                        :label="item.attr_name"
                        v-for="item in setAttribute"
                        :key="item.attr_id"
                      >
                        <el-input
                          v-model="item.attr_vals"
                          style="width: 500px"
                        ></el-input>
                      </el-form-item>
                    </el-form>
                  </el-tab-pane>
                  <!-- 商品图片 -->
                  <el-tab-pane name="3" label="商品图片">
                    <!-- 上传图片 -->
                    <el-upload
                      class="upload-demo"
                      action="http://127.0.0.1:8888/api/private/v1/upload"
                      :on-preview="handlePreview"
                      :on-remove="handleRemove"
                      :headers="headers"
                      list-type="picture"
                      :on-success="handsuccess"
                    >
                      <el-button size="small" type="primary"
                        >点击上传</el-button
                      >
                      <div slot="tip" class="el-upload__tip">
                        只能上传jpg/png文件，且不超过500kb
                      </div>
                    </el-upload>
                  </el-tab-pane>
                  <!-- 商品内容 -->
                  <el-tab-pane name="4" label="商品内容">
                    <!-- 富文本 -->
                    <quill-editor
                      style="height: 300px"
                      v-model="goods_introduce"
                    ></quill-editor>
                    <el-button
                      type="primary"
                      style="margin-top: 60px; float: right"
                      @click="addGoods"
                      >添加商品</el-button
                    >
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </el-card>
        </main>
      </section>
    </el-main>
  </div>
</template>

<script>
import _ from "lodash";
export default {
  data() {
    return {
      tabPosition: "left", //控制标签页方向
      active: "0", //初始步骤条
      id: 0,
      //基本信息
      ruleForm: {
        name: "",
        price: "",
        weight: "",
        amount: "",
      },
      //规则
      rules: {
        name: [{ required: true, message: "请输入商品名称", trigger: "blur" }],
        price: [
          {
            required: true,
            message: "请输入商品价格",
            trigger: "blur",
          },
          { type: "number", message: "商品必须是数值" },
        ],
        weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" },
          { type: "number", message: "重量必须是数值" },
        ],
        amount: [
          { required: true, message: "请输入商品数量", trigger: "blur" },
          { type: "number", message: "数量必须是数值" },
        ],
      },
      //下拉框
      value: [],
      options: [],
      //上传图片
      fileList: [
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      //tabs标签
      typeLeave: false,
      ruleFormVal: {},
      //获取动态参数的
      setSoop: [],
      checks: [],
      //获取静态属性
      setAttribute: [],
      form: {},
      //图片请求头
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      //添加图片
      pics: [],
      //富文本
      goods_introduce: "",
    };
  },
  methods: {
    check(index) {
      this.checks.push(index);
      console.log(this.checks);
    },
    //获取商品分类数据列表
    async commodityList() {
      let res = await this.axios.get("categories");
      // console.log(res);
      this.options = res.data.data;
    },
    //上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    //添加商品的Cascader选择器
    handleChange(value) {
      //当选中就会被触发
      console.log(value);
      this.value = value;
    },
    //获取商品参数
    async getSoop() {
      let res = await this.axios.get(`categories/${this.value[2]}/attributes`, {
        params: {
          sel: ["many"],
        },
      });
      res.data.data.forEach((element) => {
        element.attr_vals =
          element.attr_vals.length == 0 ? [] : element.attr_vals.split(" ");
      });
      this.setSoop = res.data.data;
      console.log(res);
    },
    //获取商品属性
    async getAttribute() {
      let res = await this.axios.get(`categories/${this.value[2]}/attributes`, {
        params: {
          sel: ["only"],
        },
      });
      console.log(res);
      this.setAttribute = res.data.data;
      console.log(this.setAttribute);
    },
    //控制添加商品的联动
    tabsa(e) {
      //通过点击那个选卡进行控制清空
      this.ruleFormVal = this.ruleForm;
    },
    beforeLeave(activeName, oldActiveName) {
      //判断是否全部输入，全部输入为true，否则为false
      if (this.value.length == 0) {
        this.$message({
          type: "error",
          message: "请选择商品分类!",
          center: "true",
        });
        this.typeLeave = false;
        return this.typeLeave;
      } else {
        this.$refs["ruleForm"].validate((val) => {
          if (val) {
            this.typeLeave = true;
            console.log(this.ruleForm);
          }
        });
        if (activeName == 1) {
          this.getSoop();
          return;
        } else if (activeName == 2) {
          this.getAttribute();
        }
        return this.typeLeave;
      }
    },
    //清空基本信息
    // essentialInformation() {

    // },
    //删除照片
    handleRemove(res) {
      console.log(res.response.data.tmp_path);
      let path = res.response.data.tmp_path;
      const i = this.pics.findIndex((x) => x.pic == path);
      this.pics.splice(i, 1);
      console.log(this.pics);
    },
    //监视图片是否上传成功
    handsuccess(res) {
      console.log(res);
      const picInfo = {
        pic: res.data.tmp_path,
      };
      this.pics.push(picInfo);
      console.log(this.pics);
    },
    //提交商品信息
    async addGoods() {
      console.log(this.value.join(","));
      let res = await this.axios.post("goods", {
        goods_name: this.ruleForm.name,
        goods_cat: this.value.join(","),
        goods_price: this.ruleForm.price,
        goods_number: this.ruleForm.amount,
        goods_weight: this.ruleForm.weight,
        goods_introduce: this.goods_introduce,
        attrs: this.setSoop,
      });
      console.log(res);
      if (res.data.meta.status == 201) {
        this.$message({
          type: "success",
          message: "添加商品成功！",
          center: "true",
        });
      } else {
        this.$message({
          type: "success",
          message: "商品已存在！",
          center: "true",
        });
      }
    },
  },
  mounted() {
    this.commodityList();
  },
};
</script>

<style lang='less' scope>
.authority {
  width: 100%;
  .el-icon-arrow-right {
    margin-bottom: 5px !important;
  }
  section {
    height: 74vh;
    main {
      .el-card {
        height: 1%;
        div {
          .el-card__header {
            border-bottom: none !important;
          }
        }
        .steps {
          margin-top: 15px;
        }
        .tabs {
          margin-top: 15px;
        }
        .nextStep {
          margin-left: 90%;
        }
        .el-form-item__label {
          display: flex;
        }
      }
      .el-card__body {
        padding: 0px;
      }
    }
  }
}
</style>